<template>
  <div class="layoutBox" :class="!boxMagin?'layoutBoxBorder':''">
    <div class="layoutBoxHeader" v-if="title">
      <div class="tit">
        <el-page-header  @back="back()"/>
        <p>{{title}}</p>
      </div>
      <div class="btns" v-if="headerBtn">
        <!--头部按钮区域-->
        <slot name="headerBtn"></slot>
      </div>
    </div>
    <div class="pageContainer" :style="{padding:boxMagin}">
      <div
        class="pageLeft"
        :style="{marginRight:boxMagin}"
        v-if="pageLeft"
      >
        <el-scrollbar>
          <!--左内容-->
          <slot name="left"></slot>
        </el-scrollbar>
      </div>
      <div
        class="pageLeft"
        :style="{marginRight:boxMagin}"
        v-if="pageList"
      >
        <el-scrollbar>
          <!--展示内容-->
          <slot name="list"></slot>
        </el-scrollbar>
      </div>
      <div
          class="pageCenter"
      >
        <el-scrollbar>
          <!--主内容-->
          <slot name="content"></slot>
        </el-scrollbar>
      </div>
      <div
          class="pageRight"
          :style="{marginLeft:boxMagin}"
          v-if="pageRight"
      >
        <el-scrollbar>
          <!--右内容-->
          <slot name="right"></slot>
        </el-scrollbar>
      </div>
    </div>
    <div class="layoutBoxFooter" v-if="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
import { useSlots } from "vue";
export default {
  name: "LayoutBox",
  props: [
    "title",//栏目标题
    "boxMagin",//间距
  ], // 获取父组件数据
  components: {

  },
  created() {
    this.headerBtn=!!useSlots().headerBtn
    this.pageLeft=!!useSlots().left
    this.pageList=!!useSlots().list
    this.pageRight=!!useSlots().right
    this.footer=!!useSlots().footer
  },
  data() {
    return {
      headerBtn:true,
      pageLeft:true,
      pageList:true,
      pageRight:true,
      footer:true,
    };
  },
  methods: {
    //返回上一页
    back() {
      this.$router.go(-1)
    },
  },
  computed: {

  }
};
</script>
<style scoped lang="scss">
//通用布局
.layoutBox{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .layoutBoxHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:6px;
    height:42px;
    border-bottom: 1px #e6e6e6 solid;
    background: #fff;
    .tit{
      display: flex;
      align-items: center;
      padding-left: 8px;
    }
    :deep(.btns){
      .el-button{
        height:30px;
      }
    }
  }
  .layoutBoxFooter{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:42px;
    padding:6px;
    border-top: 1px #e6e6e6 solid;
  }
  .pageContainer{
    flex: 1;
    display: flex;
    overflow: hidden;
    .pageLeft{
      min-width: 220px;
    }
    .pageRight{
      min-width: 220px;
    }
    .pageCenter{
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
  }
  &:not(.layoutBoxBorder){
    .pageContainer{
      background: #f5f5f5;
      > *{
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 0 1px #eee inset;
      }
    }
  }
  &.layoutBoxBorder{
      border: 1px #eee solid;
    .pageContainer{
      >*{
        border-radius: 0;
        box-shadow:none;
      }
      .pageLeft{
        border-right: 1px #e6e6e6 solid;
      }
      .pageRight{
        border-left: 1px #e6e6e6 solid;
      }
    }
  }
}
</style>